<script lang="ts">
  export let locationOfFirstDraggedColumn: number | undefined;
  export let columnLocation: number;
  export let isSelected = false;

  $: columnLocationDifference =
    locationOfFirstDraggedColumn !== undefined
      ? locationOfFirstDraggedColumn - columnLocation
      : 0;
  $: draggedOverRight = columnLocationDifference < 0;
  $: draggedOverLeft = columnLocationDifference > 0;

  let isDraggedOverCounter = 0;

  // Needs to be a counter because dragEnter and dragLeave are fired for child elements
  function dragEnter(e: DragEvent) {
    e.preventDefault();
    isDraggedOverCounter += 1;
  }

  function dragLeave() {
    isDraggedOverCounter -= 1;
  }

  $: if (locationOfFirstDraggedColumn === undefined) {
    isDraggedOverCounter = 0;
  }
</script>

<div
  class="droppable"
  class:is_selected={isSelected}
  class:dragged_over={isDraggedOverCounter}
  class:dragged_over_right={draggedOverRight}
  class:dragged_over_left={draggedOverLeft}
  on:drop
  on:dragover={(e) => e.preventDefault()}
  on:dragenter={(e) => dragEnter(e)}
  on:dragleave={() => dragLeave()}
>
  <slot class="drag-over" />
</div>

<style lang="scss">
  .droppable {
    height: 100%;
    width: 100%;
  }
  .droppable > :global(div) {
    border-left: 0.2rem solid transparent !important;
  }
  .droppable.dragged_over.dragged_over_left > :global(div) {
    border-left: 0.2rem solid var(--color-bg-help-strong) !important;
  }
  .droppable.dragged_over.dragged_over_right > :global(div) {
    border-right: 0.2rem solid var(--color-bg-help-strong) !important;
  }
</style>
